@import 'var.scss';
@import 'global.scss';

.singer-container{
    width:100%;
    margin-top: 80px;
    // border: $border;

    .singer-wrap{
        max-width: 1200px;
        min-width: 800px;
        margin: 0 auto;
        // border: $border;

        .filtrate-wrap{
            width: 100%;
            height: 150px;
            // border: $border;
            
            .active{

                background-color: rgb(92,151,238);
                color:#fff;
                transition: 0.5s;
            }
            li{
                cursor: pointer;
                font-size: 13px;
            }
            span{
                margin-right: 10px;
            }
            .area-filter{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                list-style: none;
                li{
                    // margin-left:10px;
                    margin-right: 10px;
                    // border: $border;
                    display: inline-block;
                    border-radius:10px;
                    width:50px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                }
                
            }
            .gender-filter{
                display: flex;
                list-style: none;
                li{
                    // margin-left:10px;
                    margin-right: 10px;
                    // border: $border;
                    display: inline-block;
                    border-radius:10px;
                    width:auto;
                    padding:0 10px;
                    // min-width: 50px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                }
            }
            .word-filter{
                display: flex;
                list-style: none;
                // padding-left: 5px;
                li{
                    
                    margin-right: 10px;
                    display: inline-block;
                    border-radius:150%;
                    width:30px;                    
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                }
            }

        }
        .singer-card-container{
            width: 100%;
            margin-top:15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

        }
    }
}